<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
    <title></title>
    <style>
      table th,
      table td,
      table tr {
        border: 1px solid #ddd;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">学生管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">首页 <span class="sr-only">(current)</span></a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <main>
      <div class="container">
        <div>
          <button
            class="btn btn-primary"
            data-toggle="modal"
            data-target="#addModal"
          >
            添加学生
          </button>
          <button
            class="btn btn-warning"
            data-toggle="modal"
            data-target="#searchModal"
          >
            <i class="glyphicon glyphicon-search"></i> 查询
          </button>
        </div>

        <div class="search-word">
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-danger">Left</button>
            <button type="button" class="btn btn-danger">
              <i class="glyphicon glyphicon-remove"></i>
            </button>
          </div>
        </div>

        <table class="table table-bordered">
          <!-- ---------------------------- -->
        </table>
        <!-- 页数 -->
        <div class="page">
         
        </div>
      </div>
    </main>

    <!-- 搜索modal -->
    <div class="modal fade" id="searchModal" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">搜索学生</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="username" class="col-sm-2 control-label"
                  >姓名</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    name="username"
                    class="form-control"
                    id="username"
                    placeholder="姓名"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                  <input
                    type="text"
                    name="age"
                    class="form-control"
                    id="age"
                    placeholder="age"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="age" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                  <input type="radio" name="sex" value="男" />男
                  <input type="radio" name="sex" value="女" />女
                </div>
              </div>
              <div class="form-group">
                <label for="phone" class="col-sm-2 control-label"
                  >联系方式</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    name="phone"
                    class="form-control"
                    id="phone"
                    placeholder="phone"
                  />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="searchstu">
              搜索
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加学生Modal -->
    <div class="modal fade" id="addModal" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">添加学生</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="username" class="col-sm-2 control-label"
                  >姓名</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    class="form-control"
                    name="username"
                    id="username"
                    placeholder="姓名"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                  <input
                    type="text"
                    name="age"
                    class="form-control"
                    id="age"
                    placeholder="age"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="age" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                  <input type="radio" name="sex" value="女" />不限
                  <input type="radio" name="sex" value="男" />男
                  <input type="radio" name="sex" value="女" />女
                </div>
              </div>
              <div class="form-group">
                <label for="phone" class="col-sm-2 control-label"
                  >联系方式</label
                >
                <div class="col-sm-10">
                  <input
                    type="text"
                    name="phone"
                    class="form-control"
                    id="phone"
                    placeholder="phone"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="email" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                  <input
                    type="text"
                    name="email"
                    class="form-control"
                    id="email"
                    placeholder="邮箱"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="email" class="col-sm-2 control-label"
                  >个人介绍</label
                >
                <div class="col-sm-10">
                  <textarea class="form-control" name="introduce"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="addstu">
              添加
            </button>
          </div>
        </div>
      </div>
    </div>

    <!--  修改modal -->
    <div class="modal fade" id="RegModal" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">信息编辑</h4>
          </div>
          <div class="modal-body">
            <!-- --------------------------------------- -->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="sendreg">
              修改
            </button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/html" id="showstu">
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>手机号</th>
          <th>邮箱</th>
          <th>修改</th>
          <th>删除</th>
      </tr>

      {{each user}}
          <tr class="tr">
            <td hidden class="sendid" >{{$value._id}}</td>
              <td>{{$value.username}}</td>
              <td>{{$value.age}}</td>
              <td>{{$value.sex}}</td>
              <td>{{$value.phone}}</td>
              <td>{{$value.email}}</td>
              <td><button data-toggle="modal" id="regshow" data-target="#RegModal"><a href="#"><i class="glyphicon glyphicon-edit"></i></a></button></td>
              <td><a class="del" href="#"><i class="glyphicon glyphicon-trash"></i></a></td>
          </tr>
      {{/each}}
    </script>

    <script type="text/html" id="reg">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
            
            <input type="text" name="username"  value="{{user.username}}" class="form-control" id="username" disabled placeholder="姓名">
          </div>
        </div>
        <div class="form-group">
          <label for="age" class="col-sm-2 control-label">年龄</label>
          <div class="col-sm-10">
            <input type="text"  name="age" value="{{user.age}}" class="form-control" id="age" placeholder="age">
          </div>
        </div>
        <div class="form-group">
          <label for="age" class="col-sm-2 control-label">性别</label>
          <div class="col-sm-10">
              <input type="radio" name="sex" value="不限">不限
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
          </div>
        </div>
        <div class="form-group">
          <label for="phone" class="col-sm-2 control-label">联系方式</label>
          <div class="col-sm-10">
            <input type="text" name="phone" value="{{user.phone}}" class="form-control" id="phone" placeholder="phone">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">邮箱</label>
          <div class="col-sm-10">
            <input type="text" name="email" value="{{user.email}}" class="form-control" id="email" placeholder="邮箱">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">个人介绍</label>
          <div class="col-sm-10">
            <textarea class="form-control" name="introduce">{{user.introduce}}</textarea>
            <input type="text" hidden name="_id" value="{{user._id}}" >
          </div>
        </div>
      </form>
    </script>

    <script type="text/html" id="page">
      <nav>
          <ul class="pagination">
            <li id="pagePrev">
              <a class="btn <%= page == 1 ? 'disabled' : '' %>" onclick="find({page:{{page-1}} })">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            
            <% for(var i = 1;i<= allpages;i++) { %>
                <li class="<%= page == i ? 'active' : '' %>">
                  <span><%= i %></span>
                </li>
            <% } %>
            <li  id="pageNext">
              <a href="#" aria-label="Next" onclick="find({page:{{page+1}} })" class="btn <%= page == allpages ? 'disabled' : '' %>">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
    </script>

    <script type="text/html" id="search">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>手机号</th>
        <th>邮箱</th>
        <th>修改</th>
        <th>删除</th>
    </tr>

    {{each data}}
        <tr class="tr">
          <td hidden class="sendid" >{{$value._id}}</td>
            <td>{{$value.username}}</td>
            <td>{{$value.age}}</td>
            <td>{{$value.sex}}</td>
            <td>{{$value.phone}}</td>
            <td>{{$value.email}}</td>
            <td><button data-toggle="modal" id="regshow" data-target="#RegModal"><a href="#"><i class="glyphicon glyphicon-edit"></i></a></button></td>
            <td><a class="del" href="#"><i class="glyphicon glyphicon-trash"></i></a></td>
        </tr>
    {{/each}}
  </script>

    <script src="./template-web.js"></script>
    <script src="./bootstrap/js/jquery.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <script src="./layer/layer.js"></script>

    <script>
      //信息显示
      $.get("/find", (data) => {
        if (data.error == 0) {
          console.log(data.user);
          var page=2
         find(page)
        } else {
          console.log("显示失败");
        }
      });


      function find(conditions={} ){
        $.get('/find',conditions,(data)=>{
          console.log(data);
          if(data.error==0){
             var htmlstr = template("showstu", data);
          $("table").html(htmlstr);
          var htr = template("page", data);
          $(".page").html(htr);
          }
        })
      }


      // 学生信息添加
      $("#addstu").click(() => {
        var param = $("#addModal form").serialize();
        console.log(param);
        $.get("/addstu", param, (data) => {
          if (data.error == 0) {
            location.href = "./index.html";
          } else {
            layer.msg(data.txt);
          }
        });
      });
      //信息修改显示
      $("table").on("click", "tr td #regshow", function () {
        var param = $(this).parent().siblings(".sendid")[0].innerText;
        var mes = { _id: param };
        console.log(param);
        $.get("/regshow", mes, (data) => {
          if (data.error == 0) {
            layer.msg("收到信息");
            var htmlstr = template("reg", data);
            $("#RegModal .modal-body").html(htmlstr);

            $("#sendreg").click(() => {
              var pp = $("#RegModal form").serialize();
              
              $.get("/edit", pp ,(data) => {
                if (data.error == 0) {
                  location.href = "./index.html";
                } else {
                  layer.msg(data.txt);
                }
              });
            });
          } else {
            layer.msg(data.txt);
          }
        });
      });

      //删除
      $("table").on("click", "tr td .del", function () {
        var param = $(this).parent().siblings(".sendid")[0].innerText;
        var mes = { _id: param };
        $.get("/delete", mes, (data) => {
          if (data.error == 0) {
            layer.msg(data.txt);
            location.href = "./index.html";
          } else {
            layer.msg("删除失败");
          }
        });
      });


      
// 点击页码
      $('.page').on('click','li:not(:first-child):not(:last-child)',function () {
        let page = $(this).text().trim();
        find(page)
      })

      //搜索
      $('#searchstu').click(()=>{
              var param = $('#searchModal form').serialize();
              $.get('/search', param, data=>{
                  if (data.error == 0) {
                    var htmlstr = template("search", data);
                    $("table").html(htmlstr);
                    $('#searchModal').modal('hide')
                    $('#searchModal form').get(0).reset();
                  } else {
                      layer.msg(data.txt);

                  }
              });
          });
    </script>
  </body>
</html>











 <!-- <nav aria-label="...">
            <ul class="pagination">
              <li class="disabled">
                <span>
                  <span aria-hidden="true">&laquo;</span>
                </span>
              </li>
              <li class="active">
                <span>1 <span class="sr-only">(current)</span></span>
              </li>
            </ul>
          </nav> -->
